<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<head>
    <meta charset="UTF-8">
    <title>添加从业人员</title>
    <link href="../../resources/css/common/bootstrap3.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/common/datetimepicker.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/common/page.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../../resources/css/common/component.css"/>
    <link rel="stylesheet" type="text/css" href="../../resources/css/common/Huploadify.css"/>
<style>
    #demo {
        margin-top: 20px;
    }

</style>
<baby>
    <div class="container">
        <div class="page-header navbar-color">
            <h1 id="navbars">添加从业人员</h1>
        </div>
        <div id="demo">
            <div class="form-horizontal add-border">
                <div class="form-group">
                    <label class="col-sm-3 control-label">名称:</label>
                    <div class="col-sm-3">
                        <input type="text" v-model="name" class="form-control" placeholder="请输入服务名称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">性别:</label>
                    <div class="col-sm-3">
                        <label class="radio-inline">
                            <input type="radio" name="sex" v-model="sex" value="1"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" v-model="sex" value="2"> 女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">联系电话:</label>
                    <div class="col-sm-3">
                        <input type="text" v-model="telphone" class="form-control" placeholder="请输入联系电话">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">头像:</label>
                    <div class="col-sm-3">
                        <div id="avatarUrlUpload">
                            <img src="" id="avatarPictureUrl">
                            <input type="text" v-model="avatar" class="form-control" readonly="readonly">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">学历:</label>
                    <div class="col-sm-3">
                        <input type="text" v-model="education" class="form-control" placeholder="请输入学历">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">级别:</label>
                    <div class="col-sm-3">
                        <label class="radio-inline">
                            <input type="radio" name="level" v-model="level" value="1"> 高级
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="level" v-model="level" value="2"> 初级
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">证书:</label>
                    <div class="col-sm-3">
                        <div id="certificateUrlUpload">
                            <img src="" id="certificateUrl">
                            <input type="text" v-model="certificate" class="form-control" readonly="readonly">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-10">
                        <button type="button" class="btn btn-primary" @click="addInfo()">提交</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</baby>

<script type="text/javascript" src="../../resources/js/common/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../resources/js/common/jquery.Huploadify.js"></script>
<script src="../../resources/js/common/bootstrap3.min.js" type="text/javascript"></script>
<script src="../../resources/js/common/vue.min.js"></script>
<script src="../../resources/js/common/common.js"></script>

<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            name: '',
            sex: '',
            telphone:'',
            avatar: '',
            certificate:'',
            education:'',
            level:''
        }, methods: {
            addInfo: function () {
                if(this.name==''){
                    alert("请填姓名");
                    return;
                }
                if(this.telphone==''){
                    alert("请填联系电话");
                    return;
                }
                if(this.education==''){
                    alert("请填学历");
                    return;
                }
                if(this.sex==''){
                    alert("请选性别");
                    return;
                }
                if(this.level==''){
                    alert("请选级别");
                    return;
                }
                var param = {};
                param['name'] = this.name;
                param['sex'] = this.sex;
                param['telphone'] = this.telphone;
                param['avatar'] = this.avatar;
                param['certificate'] = this.certificate;
                param['education'] = this.education;
                param['level'] = this.level;
                if(this.avatar==''){
                    alert("请上传展头像");
                    return;
                }
                if(this.certificate==''){
                    alert("请上传资格证书");
                    return;
                }
                var flag = executeAjaxByPost('/backend/practitioners/savePractitoners',param);
                if(flag.status == 1){
                    alert("添加成功");
                    window.location.href="/html/practitioners/list.html";
                }else{
                    alert("操作失败，请重试！！！");
                }
            }
        },
        mounted: function () {
            $('#avatarUrlUpload').Huploadify({
                auto:false,
                fileTypeExts:'*.*',
                multi:true,
                formData:{},
                fileSizeLimit:99999999999,
                showUploadedPercent:true,
                showUploadedSize:true,
                removeTimeout:9999999,
//                uploader:'/api/tools/upload_file_for_id',
                uploader:'/backend/api/upload',
                onUploadStart:function(file){
                    console.log(file.name+'开始上传');
                },
                onInit:function(obj){
                    console.log('初始化');
                    console.log(obj);
                },
                onUploadComplete:function(file,data){
                    var data_map = jQuery.parseJSON(data);
                    if (data_map.status == '1') {
                        var imgUrl = data_map.fileUrl;
                        demo.avatar = imgUrl;
                        $('#avatarPictureUrl').attr('src', imgUrl);
                    } else {
                        alert(data_map.error);
                    }
                },
                onCancel:function(file){
                    console.log(file.name+'删除成功');
                },
                onClearQueue:function(queueItemCount){
                    console.log('有'+queueItemCount+'个文件被删除了');
                },
                onDestroy:function(){
                    console.log('destroyed!');
                },
                onSelect:function(file){
                    console.log(file.name+'加入上传队列');
                },
                onQueueComplete:function(queueData){
                    console.log('队列中的文件全部上传完成',queueData);
                }
            });
            $('#certificateUrlUpload').Huploadify({
                auto:false,
                fileTypeExts:'*.*',
                multi:true,
                formData:{},
                fileSizeLimit:99999999999,
                showUploadedPercent:true,
                showUploadedSize:true,
                removeTimeout:9999999,
//                uploader:'/api/tools/upload_file_for_id',
                uploader:'/backend/api/upload',
                onUploadStart:function(file){
                    console.log(file.name+'开始上传');
                },
                onInit:function(obj){
                    console.log('初始化');
                    console.log(obj);
                },
                onUploadComplete:function(file,data){
                    var data_map = jQuery.parseJSON(data);
                    if (data_map.status == '1') {
                        var imgUrl = data_map.fileUrl;
                        demo.certificate = imgUrl;
                        $('#certificateUrl').attr('src', imgUrl);
                    } else {
                        alert(data_map.error);
                    }
                },
                onCancel:function(file){
                    console.log(file.name+'删除成功');
                },
                onClearQueue:function(queueItemCount){
                    console.log('有'+queueItemCount+'个文件被删除了');
                },
                onDestroy:function(){
                    console.log('destroyed!');
                },
                onSelect:function(file){
                    console.log(file.name+'加入上传队列');
                },
                onQueueComplete:function(queueData){
                    console.log('队列中的文件全部上传完成',queueData);
                }
            });
        }
    });
</script>


</html>

